<template>
  <view class="wcb-contain">
    <view class="wcb-search-header">
      <view class="wcb-search-label" @click="changeCity">{{posData.startCity}}</view>
      <uni-icons type="down" size="16" color="white"></uni-icons>
    </view>
    <view class="wcb-search-content">
      <view class="scb-nav">
        <view :class="{'scb-nav-select': item.selected,'scb-nav-list': true}" v-for="(item,idx) in zoneData" :key="idx" @click="clickZone(idx)">
          <view class="scb-nav-list-title">{{item.name}}</view>
        </view>
      </view>
      <view class="scb-nav-r">
        <view class="scb-nav-r-list">
          <uni-indexed-list :options="siteList" :show-select="true" @click="bindClick" />
        </view>
      </view>
    </view>

  </view>
</template>

<script>
export default {
  data() {
    return {
      posData:{
        startCity: '佛山市'
      },
      items: [
        { value: '佛山市', text: "佛山市" },
        { value: '广州市', text: '广州市' },
        { value: '珠海市', text: '珠海市' },
      ],
      zoneData:[{id:1,name:'禅城区',selected: true},{id:2,name:'南海区'},{id:3,name:'顺德区'},{id:4,name:'三水区'},{id:5,name:'高明区'}],
      siteList:[{
        "letter": "A",
        "data": [
          "阿克苏机场",
          "阿拉山口机场",
          "阿勒泰机场",
          "阿里昆莎机场",
          "安庆天柱山机场",
          "澳门国际机场"
        ]
      }, {
        "letter": "B",
        "data": [
          "保山机场",
          "包头机场",
          "北海福成机场",
          "北京南苑机场",
          "北京首都国际机场"
        ]
      }]
    }
  },
  onLoad(opt) {
    console.log(opt)
    const eventChannel = this.getOpenerEventChannel();
    if (JSON.stringify(eventChannel) !== '{}'){
      eventChannel.emit('acceptDataFromSiteSelect',{test:'123'})
    }
  },
  methods:{
    bindClick(e){
      console.log('select',e);
    },
    clickZone(idx){
      this.zoneData.forEach((a,index)=>a.selected = index === idx);
      console.log('您选择了', this.zoneData[idx]);
    },
    changeCity(e){
      uni.navigateTo({
        url: '/pages/citySelect/citySelect',
        events:{
          acceptDataFromCitySelect(cityData){
            console.log(cityData);
          }
        }
      })
    }
  }
}

</script>


<style scoped lang="scss">

  .wcb-search-header{
    background: #2979ff;
    color: white;
    line-height: 80rpx;
    padding: 0 0 2rpx 20rpx;
    font-size: 28rpx;
    display: flex;
    .wcb-search-label{
      padding-right: 10rpx;
    }
  }

  .wcb-search-content{
    position: relative;
    font-size: 28rpx;
    .scb-nav{
      position: fixed;
      width: 200rpx;
      border-right: 1px solid #f5f5f5;
      border-bottom: 1px solid #f5f5f5;
      padding-bottom: 10rpx;
      background: #FFFFFF;
      height: calc(100vh - 100rpx);
      .scb-nav-list{
        padding: 16rpx 12rpx;
        text-align: center;
        border-right: solid 2px #FFFFFF;
      }
      .scb-nav-select{
        color: #2979ff;
        border-right: solid 2px #2979ff;
        font-weight: bolder;
      }
    }
    .scb-nav-r{
      position: relative;
      left: 205rpx;
      .scb-nav-r-list{
        position: relative;
        height: calc(100vh - 200rpx);
      }
    }
  }
</style>
